<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <style type="text/css">
            /*margin and padding on body element
			can introduce errors in determining
			element position and are not recommended;
			we turn them off as a foundation for YUI
			CSS treatments. */
            body {
                margin:0;
                padding:0;
            }
        </style>

        <link rel="stylesheet" type="text/css" href="fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="carousel.css" />
        <link rel="stylesheet" type="text/css" href="paginator.css" />
        <script type="text/javascript" src="yahoo-dom-event.js"></script>
        <script type="text/javascript" src="element-min.js"></script>
        <script type="text/javascript" src="carousel-min.js"></script>
        <script type="text/javascript" src="paginator-min.js"></script>


        <!--begin custom header content for this example-->
        <style type="text/css">
            #container {
                border: none;
                background: #e2edfa;
                margin: 0 auto;
                -moz-border-radius: 6px;
                padding: 8px 16px 4px;
            }

            #spotlight {
                border: 1px solid #ccc;
                height: 180px;
                margin: 10px auto;
                padding: 1px;
                width: 240px;
            }

            #pagination {
                font: 13px Arial, Helvetica, sans-serif;
                margin: 10px auto;
                padding: 1px;
                text-align: center;
                width: 240px;
            }

            .yui-skin-sam .yui-pg-page {
                background: #fff;
                border: 1px solid #cbcbcb;
                margin: 0 1px;
                padding: 2px 6px;
            }

            /* Always be sure to give your carousel items a width and a height */
            .yui-carousel-element li {
                height: 75px;
                opacity: 0.6;
                width: 75px;
            }

            .yui-carousel-element .yui-carousel-item-selected {
                opacity: 1;
            }

            .yui-carousel-nav {
                display: none;
            }
        </style>

        <!--end custom header content for this example-->

    </head>

    <body class="yui-skin-sam">


        <h1>Using Paginator with Carousel</h1>

        <div class="exampleIntro">
            <p>
                This example demonstrates the use of <a href="http://developer.yahoo.com/yui/pagination/">YUI Paginator Control</a> for navigating the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a>.
            </p>

        </div>

        <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

        <!-- The Carousel container -->
        <div id="container">
            <ol id="carousel">
                <li>
                    <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
                </li>
                <li>
                    <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
                </li>
                <li>
                    <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
                </li>
                <li>
                    <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
                </li>
                <li>
                    <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
                </li>
                <li>
                    <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
                </li>
                <li>
                    <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
                </li>
                <li>
                    <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
                </li>
                <li>
                    <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
                </li>
            </ol>
        </div>
        <!-- The pagination container -->
        <div id="pagination"></div>
        <!-- The spotlight container -->
        <div id="spotlight"></div>

    <style type="text/css">
        #container {
            border: none;
            background: #e2edfa;
            -moz-border-radius: 6px;
            padding: 8px 16px 4px;
        }

        #spotlight {
            border: 1px solid #ccc;
            height: 180px;
            margin: 10px auto;
            padding: 1px;
            width: 240px;
        }

        #pagination {
            font: 13px Arial, Helvetica, sans-serif;
            margin: 10px auto;
            padding: 1px;
            text-align: center;
            width: 240px;
        }

        .yui-skin-sam .yui-pg-page {
            background: #fff;
            border: 1px solid #cbcbcb;
            margin: 0 1px;
            padding: 2px 6px;
        }

        .yui-carousel-element li {
            opacity: 0.6;
        }

        .yui-carousel-element .yui-carousel-item-selected {
            opacity: 1;
        }

        .yui-carousel-nav {
            display: none;
        }
    </style>
    <script>
        (function () {
            // Get the image link from within its (parent) container.
            function getImage(parent) {
                var el = parent.firstChild;
                    
                while (el) { // walk through till as long as there's an element
                    if (el.nodeName.toUpperCase() == "IMG") { // found an image
                        // flickr uses "_s" suffix for small, and "_m" for big
                        // images respectively
                        return el.src.replace(/_s\.jpg$/, "_m.jpg");
                    }
                    el = el.nextSibling;
                }
            
                return "";
            }
                
            YAHOO.util.Event.onDOMReady(function (ev) {
                var spotlight  = YAHOO.util.Dom.get("spotlight"),
                carousel   = new YAHOO.widget.Carousel("container"),
                numItems   = carousel.get("numItems"),
                numVisible = carousel.get("numVisible"),
                paginator;
                       
                carousel.on("itemSelected", function (index) {
                    // item has the reference to the Carousel's item
                    var item = carousel.getElementForItem(index);

                    if (item) {
                        spotlight.innerHTML = "<img src=\""+getImage(item)+"\">";
                    }
                });
            
                carousel.render();
                carousel.show();
                
                paginator     = new YAHOO.widget.Paginator({
                    containers   : "pagination",
                    rowsPerPage  : 1,
                    template     : "{PreviousPageLink} "  +
                        "{PageLinks} " +
                        "{NextPageLink}",
                    totalRecords : Math.ceil(numItems / numVisible)
                });

                paginator.subscribe("changeRequest", function (state) {
                    carousel.set("selectedItem", (state.page - 1) * numVisible);
                    paginator.setState(state);
                });

                carousel.on("pageChange", function (page) {
                    // Paginator's page begins from 1
                    // Also, we need to suppress this triggering a changeRequest
                    // event.
                    paginator.setPage(page + 1, true);
                });
            
                paginator.render();
            });
        })();
    </script>

    <!--END SOURCE CODE FOR EXAMPLE =============================== -->


    <!--MyBlogLog instrumentation-->
    <script type="text/javascript" src="http://track2.mybloglog.com/js/jsserv.php?mblID=2007020704011645"></script>

</body>
</html>

<script type="text/javascript"
src="http://l.yimg.com/d/lib/rt/rto1_78.js"></script><script>var rt_page="2012402828:FRTMA"; var
    rt_ip="41.234.193.236";
    if ("function" == typeof(rt_AddVar) ){ rt_AddVar("ys", escape("18198B62")); rt_AddVar("cr", escape("5JBd0FtMRIE"));
        rt_AddVar("sg", escape("/SIG=13f1mrebs75g1m2d7fruu2&b=4&d=WQVjUJlpYFIVXVfV1d94G_MBvQo-&s=aq&i=1Zi5f18KKeqNJ_PGJ5va/1328973353/41.234.193.236/18198B62")); rt_AddVar("yd", escape("1896125937"));
    }</script><noscript><img src="http://rtb.pclick.yahoo.com/images/nojs.gif?p=2012402828:FRTMA"></noscript>
<!-- SpaceID=2012402828 loc=FSRVY noad -->
<script language=javascript>
    if(window.yzq_d==null)window.yzq_d=new Object();
    window.yzq_d['1FeNLmKL5SM-']='&U=12d1nmsiu%2fN%3d1FeNLmKL5SM-%2fC%3d-1%2fD%3dFSRVY%2fB%3d-1%2fV%3d0';
</script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=BLI3LWKLGUlywDYTTv37wgvAKerB7E82hikAASA6&T=1823td5if%2fX%3d1328973353%2fE%3d2012402828%2fR%3ddev_net%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d3301731049%2fH%3dc2VydmVJZD0iQkxJM0xXS0xHVWx5d0RZVFR2Mzd3Z3ZBS2VyQjdFODJoaWtBQVNBNiIgc2l0ZUlkPSI0NDY1NTUxIiB0U3RtcD0iMTMyODk3MzM1MzA3NjE4OSIg%2fQ%3d-1%2fS%3d1%2fJ%3d18198B62&U=12d1nmsiu%2fN%3d1FeNLmKL5SM-%2fC%3d-1%2fD%3dFSRVY%2fB%3d-1%2fV%3d0"></noscript><script language=javascript>
    if(window.yzq_d==null)window.yzq_d=new Object();
    window.yzq_d['0leNLmKL5SM-']='&U=13ejftt1j%2fN%3d0leNLmKL5SM-%2fC%3d289534.9603437.10326224.9298098%2fD%3dFOOT%2fB%3d4123617%2fV%3d1';
</script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=BLI3LWKLGUlywDYTTv37wgvAKerB7E82hikAASA6&T=1824gpu1r%2fX%3d1328973353%2fE%3d2012402828%2fR%3ddev_net%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d3630518631%2fH%3dc2VydmVJZD0iQkxJM0xXS0xHVWx5d0RZVFR2Mzd3Z3ZBS2VyQjdFODJoaWtBQVNBNiIgc2l0ZUlkPSI0NDY1NTUxIiB0U3RtcD0iMTMyODk3MzM1MzA3NjE4OSIg%2fQ%3d-1%2fS%3d1%2fJ%3d18198B62&U=13ejftt1j%2fN%3d0leNLmKL5SM-%2fC%3d289534.9603437.10326224.9298098%2fD%3dFOOT%2fB%3d4123617%2fV%3d1"></noscript><!--QYZ ,;;;2012402828;;-->
<!-- VER-3.0.211580 -->
<script language=javascript>
    if(window.yzq_p==null)document.write("<scr"+"ipt language=javascript src=http://l.yimg.com/d/lib/bc/bc_2.0.5.js></scr"+"ipt>");
</script><script language=javascript>
    if(window.yzq_p)yzq_p('P=BLI3LWKLGUlywDYTTv37wgvAKerB7E82hikAASA6&T=17t9r4rbn%2fX%3d1328973353%2fE%3d2012402828%2fR%3ddev_net%2fK%3d5%2fV%3d1.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d2180247421%2fH%3dc2VydmVJZD0iQkxJM0xXS0xHVWx5d0RZVFR2Mzd3Z3ZBS2VyQjdFODJoaWtBQVNBNiIgc2l0ZUlkPSI0NDY1NTUxIiB0U3RtcD0iMTMyODk3MzM1MzA3NjE4OSIg%2fS%3d1%2fJ%3d18198B62');
    if(window.yzq_s)yzq_s();
</script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=BLI3LWKLGUlywDYTTv37wgvAKerB7E82hikAASA6&T=181turgqc%2fX%3d1328973353%2fE%3d2012402828%2fR%3ddev_net%2fK%3d5%2fV%3d3.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d860816603%2fH%3dc2VydmVJZD0iQkxJM0xXS0xHVWx5d0RZVFR2Mzd3Z3ZBS2VyQjdFODJoaWtBQVNBNiIgc2l0ZUlkPSI0NDY1NTUxIiB0U3RtcD0iMTMyODk3MzM1MzA3NjE4OSIg%2fQ%3d-1%2fS%3d1%2fJ%3d18198B62"></noscript><script language=javascript>
    (function(){window.xzq_p=function(R){M=R};window.xzq_svr=function(R){J=R};function F(S){var T=document;if(T.xzq_i==null){T.xzq_i=new Array();T.xzq_i.c=0}var R=T.xzq_i;R[++R.c]=new Image();R[R.c].src=S}window.xzq_sr=function(){var S=window;var Y=S.xzq_d;if(Y==null){return }if(J==null){return }var T=J+M;if(T.length>P){C();return }var X="";var U=0;var W=Math.random();var V=(Y.hasOwnProperty!=null);var R;for(R in Y){if(typeof Y[R]=="string"){if(V&&!Y.hasOwnProperty(R)){continue}if(T.length+X.length+Y[R].length<=P){X+=Y[R]}else{if(T.length+Y[R].length>P){}else{U++;N(T,X,U,W);X=Y[R]}}}}if(U){U++}N(T,X,U,W);C()};function N(R,U,S,T){if(U.length>0){R+="&al="}F(R+U+"&s="+S+"&r="+T)}function C(){window.xzq_d=null;M=null;J=null}function K(R){xzq_sr()}function B(R){xzq_sr()}function L(U,V,W){if(W){var R=W.toString();var T=U;var Y=R.match(new RegExp("\\\\(([^\\\\)]*)\\\\)"));Y=(Y[1].length>0?Y[1]:"e");T=T.replace(new RegExp("\\\\([^\\\\)]*\\\\)","g"),"("+Y+")");if(R.indexOf(T)<0){var X=R.indexOf("{");if(X>0){R=R.substring(X,R.length)}else{return W}R=R.replace(new RegExp("([^a-zA-Z0-9$_])this([^a-zA-Z0-9$_])","g"),"$1xzq_this$2");var Z=T+";var rv = f( "+Y+",this);";var S="{var a0 = '"+Y+"';var ofb = '"+escape(R)+"' ;var f = new Function( a0, 'xzq_this', unescape(ofb));"+Z+"return rv;}";return new Function(Y,S)}else{return W}}return V}window.xzq_eh=function(){if(E||I){this.onload=L("xzq_onload(e)",K,this.onload,0);if(E&&typeof (this.onbeforeunload)!=O){this.onbeforeunload=L("xzq_dobeforeunload(e)",B,this.onbeforeunload,0)}}};window.xzq_s=function(){setTimeout("xzq_sr()",1)};var J=null;var M=null;var Q=navigator.appName;var H=navigator.appVersion;var G=navigator.userAgent;var A=parseInt(H);var D=Q.indexOf("Microsoft");var E=D!=-1&&A>=4;var I=(Q.indexOf("Netscape")!=-1||Q.indexOf("Opera")!=-1)&&A>=4;var O="undefined";var P=2000})();
</script><script language=javascript>
    if(window.xzq_svr)xzq_svr('http://csc.beap.ad.yieldmanager.net/');
    if(window.xzq_p)xzq_p('i?bv=1.0.0&bs=(128qucd6r(gid$BLI3LWKLGUlywDYTTv37wgvAKerB7E82hikAASA6,st$1328973353076189,v$1.0))&t=J_3-D_3');
    if(window.xzq_s)xzq_s();
</script><noscript><img width=1 height=1 alt="" src="http://csc.beap.ad.yieldmanager.net/i?bv=1.0.0&bs=(128qucd6r(gid$BLI3LWKLGUlywDYTTv37wgvAKerB7E82hikAASA6,st$1328973353076189,v$1.0))&t=J_3-D_3"></noscript>
<!-- p1.ydn.bf1.yahoo.com compressed/chunked Sat Feb 11 07:15:53 PST 2012 -->
